<template>
  <div class="app_content_container">
    <Breadcrumb
      :items="[{ label: '二层子网', path: '/model-mgmt/layer-2subnet' }, name]"
    />
    <div class="app_content_box">
      <Tabs
        v-model="activeKey"
        style="padding: 0 16px"
        :list="layer2subnetDetailList"
        @tabChange="tabChange"
      >
        <ga-tab-pane key="relatedItpm" v-if="!isShared">
          <template #title>关联项目</template>
        </ga-tab-pane>
      </Tabs>
      <component :is="componentName" :id="id"></component>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import { layer2subnetDetailList } from "@/constant";
import { getLayer2SubnetDetail } from "@/api/layer2subnet";
const router = useRouter();
const route = useRoute();
const { id } = route.params;
const { name, tab } = route.query;
const componentName = ref(null);
const isShared = ref();
const activeKey = ref(tab || layer2subnetDetailList[0]["value"]);
// 加载组件
const loadModule = async (moduleName) => {
  const module = await import(`./${moduleName}/index.vue`);
  componentName.value = module.default;
};
// 处理方法
const tabChange = (val) => {
  loadModule(val);
  router.replace({
    path: route.fullPath,
    query: { ...route.query, tab: val },
  });
};
// 获取列表
const fetchSubnetDetailData = async () => {
  try {
    const { data } = await getLayer2SubnetDetail(id);
    isShared.value = data.isShared;
  } catch (err) {
    console.log(err);
  }
};
onMounted(() => {
  fetchSubnetDetailData();
  loadModule(activeKey.value);
});
</script>

<style lang="scss" scoped>
.app_content_box {
  // border: 1px solid #000;
}
</style>
